<template>
  <div class="dashboard-container">
    <el-row :gutter="24">

      <el-col :span="8">
        <el-card class="box-card">
          <div class="Echarts">
            <div id="main" style="width: 400px;height: 300px;"></div>
          </div>
        </el-card>
      </el-col>


      <el-col :span="8">
        <el-card class="box-card">
          <a-descriptions title="订单基础信息:">
            <a-descriptions-item>
              <i class="el-icon-s-order">订单总数:</i>
              <strong style="color:#00BFFF"> <b>{{ dashboardData.orderDashboardVO.orderTotal }}</b>
              </strong>
            </a-descriptions-item>

            <a-descriptions-item>
              <i class="el-icon-s-order">下订单总数:</i>
              <strong style="color:#00BFFF"> <b>{{ dashboardData.orderDashboardVO.placeAnOrderCount }}</b>
              </strong>
            </a-descriptions-item>

            <a-descriptions-item>
              <i class="el-icon-s-order">网点自寄总数:</i>
              <strong style="color:#00BFFF"> <b>{{ dashboardData.orderDashboardVO.selfDeliveryFromOutletsCount }}</b>
              </strong>
            </a-descriptions-item>

            <a-descriptions-item>
              <i class="el-icon-s-order">已取件总数:</i>
              <strong style="color:#00BFFF"> <b>{{ dashboardData.orderDashboardVO.pickedUpCount }}</b>
              </strong>
            </a-descriptions-item>

            <a-descriptions-item>
              <i class="el-icon-s-order">网点入库总数:</i>
              <strong style="color:#00BFFF"> <b>{{ dashboardData.orderDashboardVO.outletStorageCount }}</b>
              </strong>
            </a-descriptions-item>

            <a-descriptions-item>
              <i class="el-icon-s-order">运输中:</i>
              <strong style="color:#00BFFF"> <b>{{ dashboardData.orderDashboardVO.inTransitCount }}</b>
              </strong>
            </a-descriptions-item>

            <a-descriptions-item>
              <i class="el-icon-s-order">网点出库:</i>
              <strong style="color:#00BFFF"> <b>{{ dashboardData.orderDashboardVO.outletCount }}</b>
              </strong>
            </a-descriptions-item>

            <a-descriptions-item>
              <i class="el-icon-s-order">派送中:</i>
              <strong style="color:#00BFFF"> <b>{{ dashboardData.orderDashboardVO.deliveringCount }}</b>
              </strong>
            </a-descriptions-item>


            <a-descriptions-item>
              <i class="el-icon-s-order">签收:</i>
              <strong style="color:#00BFFF"> <b>{{ dashboardData.orderDashboardVO.signForCount }}</b>
              </strong>
            </a-descriptions-item>

            <a-descriptions-item>
              <i class="el-icon-s-order">取件:</i>
              <strong style="color:#00BFFF"> <b>{{ dashboardData.orderDashboardVO.pickupCount }}</b>
              </strong>
            </a-descriptions-item>

            <a-descriptions-item>
              <i class="el-icon-s-order">预结:</i>
              <strong style="color:#00BFFF"> <b>{{ dashboardData.orderDashboardVO.preClosingCount }}</b>
              </strong>
            </a-descriptions-item>

            <a-descriptions-item>
              <i class="el-icon-s-order">到付:</i>
              <strong style="color:#00BFFF"> <b>{{ dashboardData.orderDashboardVO.toPayCount }}</b>
              </strong>
            </a-descriptions-item>

            <a-descriptions-item>
              <i class="el-icon-s-order">未付:</i>
              <strong style="color:#00BFFF"> <b>{{ dashboardData.orderDashboardVO.unpaidCount }}</b>
              </strong>
            </a-descriptions-item>

            <a-descriptions-item>
              <i class="el-icon-s-order">已付:</i>
              <strong style="color:#00BFFF"> <b>{{ dashboardData.orderDashboardVO.paidCount }}</b>
              </strong>
            </a-descriptions-item>

            <a-descriptions-item>
              <i class="el-icon-s-order">订单超时:</i>
              <strong style="color:#00BFFF"> <b>{{ dashboardData.orderDashboardVO.payTimeOutCount }}</b>
              </strong>
            </a-descriptions-item>

            <a-descriptions-item>
              <i class="el-icon-s-order">同城:</i>
              <strong style="color:#00BFFF"> <b>{{ dashboardData.orderDashboardVO.sameCityCount }}</b>
              </strong>
            </a-descriptions-item>

            <a-descriptions-item>
              <i class="el-icon-s-order">城际:</i>
              <strong style="color:#00BFFF"> <b>{{ dashboardData.orderDashboardVO.intercityCount }}</b>
              </strong>
            </a-descriptions-item>

            <a-descriptions-item>
              <i class="el-icon-s-order">上门取件:</i>
              <strong style="color:#00BFFF"> <b>{{ dashboardData.orderDashboardVO.pickUpCount }}</b>
              </strong>
            </a-descriptions-item>

          </a-descriptions>
        </el-card>

      </el-col>


      <el-col :span="8">
        <el-card class="box-card">

          <div>
            <div id="truckMain" style="width: 400px;height: 300px;"></div>
          </div>
        </el-card>
      </el-col>
    </el-row>

    <el-row :gutter="24">
      <el-col :span="8">
        <el-card class="box-card" style="width: 400px">
          <a-descriptions title="运单基础信息:">
            <a-descriptions-item>
              <img src="http://pinda.itheima.net/tms/static/img/1.3d3a506e.png">
              <strong style="color:#00BFFF"> <b>{{
                  dashboardData.transportOrderDashboardVO.transportOrderTotal
                }}</b></strong>
              <br/>
              <b>运单总数</b>
            </a-descriptions-item>
            <a-descriptions-item>
              <img src="http://pinda.itheima.net/tms/static/img/2.44d56821.png">
              <strong style="color:#00BFFF"> <b>{{
                  dashboardData.transportOrderDashboardVO.readyToDepart
                }}</b></strong>
              <br/>
              <b>待发车</b>
            </a-descriptions-item>
            <a-descriptions-item>
              <img src="http://pinda.itheima.net/tms/static/img/3.c1429087.png">
              <strong style="color:#00BFFF"> <b>{{
                  dashboardData.transportOrderDashboardVO.inTransit
                }}</b></strong>
              <br/>
              <b>运输中</b>
            </a-descriptions-item>
            <a-descriptions-item>
              <img src="http://pinda.itheima.net/tms/static/img/4.dae4931e.png">
              <strong style="color:#00BFFF"> <b>{{
                  dashboardData.transportOrderDashboardVO.arrived
                }}</b></strong>
              <br/>
              <b>已到达</b>
            </a-descriptions-item>
          </a-descriptions>
        </el-card>
      </el-col>
      <el-col :span="16">
        <el-card class="box-card" style="width: 845px">
          <div id="chinaMap" style="width: 800px;height: 400px;">

          </div>
        </el-card>
      </el-col>

    </el-row>


  </div>
</template>

<script>
import dashboard from '@/api/dashboard/index'
import china from 'echarts/map/json/china.json'//中国地图
echarts.registerMap('china', china)

export default {
  name: 'Dashboard',
  props: {
    className: {
      type: String,
      default: 'chart'
    },
    width: {
      type: String,
      default: '100%'
    }
  },
  data() {
    return {
      dashboardData: {},
      dateCount: 7,
      truckStatusData: [],
      //飞机
      // planePath: 'path://M1705.06,1318.313v-89.254l-319.9-221.799l0.073-208.063c0.521-84.662-26.629-121.796-63.961-121.491c-37.332-0.305-64.482,36.829-63.961,121.491l0.073,208.063l-319.9,221.799v89.254l330.343-157.288l12.238,241.308l-134.449,92.931l0.531,42.034l175.125-42.917l175.125,42.917l0.531-42.034l-134.449-92.931l12.238-241.308L1705.06,1318.313z'
      planePath: 'image://images/car.png'
    }
  },
  methods: {
    local() {
      let lineData = this.dashboardData.transportLineDashboardVOS
      let coreOrgList = this.dashboardData.coreOrgList
      let seriesLine = []
      seriesLine.push({
          type: 'lines',//用于带有起点和终点信息的线数据的绘制，主要用于地图上的航线，路线的可视化。
          zlevel: 1,
          effect: {//线特效的配置
            show: true,
            period: 6,//特效动画的时间
            trailLength: 0.7,//特效尾迹的长度。取从 0 到 1 的值，数值越大尾迹越长。
            color: '#fff',
            symbolSize: 3//特效标记的大小，可以设置成诸如 10 这样单一的数字，也可以用数组分开表示高和宽，例如 [20, 10] 表示标记宽为20，高为10。
          },
          lineStyle: {
            normal: {
              color: '#46bee9',
              width: 0,
              curveness: 0.2//边的曲度，支持从 0 到 1 的值，值越大曲度越大
            }
          },
          data: this.convertData2(lineData)//线数据集。
        },
        {
          type: 'lines',
          zlevel: 2,
          symbol: ['none', 'arrow'],//线两端的标记类型，可以是一个数组分别指定两端
          symbolSize: 10,
          effect: {
            show: true,
            period: 6,
            trailLength: 0,
            symbol: this.planePath,
            symbolSize: 15
          },
          lineStyle: {
            color: '#46bee9',
            width: 1,
            opacity: 0.6,
            curveness: 0.2
          },
          data: this.convertData2(lineData)
        },
        {
          type: 'effectScatter',//带有涟漪特效动画的散点（气泡）图。利用动画特效可以将某些想要突出的数据进行视觉突出。
          coordinateSystem: 'geo',//该系列使用的坐标系
          zlevel: 2,
          rippleEffect: {//涟漪特效相关配置
            brushType: 'stroke'
          },
          label: {//图形上的文本标签，可用于说明图形的一些数据信息，比如值，名称等
            show: true,
            position: 'right',
            formatter: '{b}'
          },
          itemStyle: {
            color: '#46bee9'
          },
          data: this.convertData2(lineData)
        })
      return seriesLine
    },
    convertData2(data) {
      var res = []
      for (let i = 0; i < data.length; i++) {
        let startAgency = data[i].startAgency
        let startLongitude = startAgency.longitude
        let startLatitude = startAgency.latitude

        let endAgency = data[i].endAgency
        let endLongitude = endAgency.longitude
        let endLatitude = endAgency.latitude
        let startCoords = []
        startCoords.push(startLongitude)
        startCoords.push(startLatitude)
        let endCoords = []
        endCoords.push(endLongitude)
        endCoords.push(endLatitude)
        res.push({
          fromName: startAgency.name,
          toName: endAgency.name,
          coords: [startCoords, endCoords]
        })
      }
      return res
    },
    createLine(seriesData) {
      let myChart = echarts.init(document.getElementById('chinaMap'))
      myChart.setOption({
        backgroundColor: '#404a59',//设置整体背景色
        title: {//标题设置
          text: '品达物流线路图',
          left: 'center',
          textStyle: {
            color: '#fff',
            fontFamily: 'Monospace',
            fontWeight: 'lighter'
          }
        },
        geo: {//地理坐标系组件用于地图的绘制，支持在地理坐标系上绘制散点图，线集。
          map: 'china',//配置中国地图
          roam: true,//是否开启鼠标缩放和平移漫游
          itemStyle: {
            areaColor: '#323c48',//设置区域颜色
            borderColor: '#404a59',//设置各各省市边界颜色
            normal: {
              //未选中的状态
              borderColor: '#B22222',
              areaColor: '#FFE4C4', //背景颜色
              label: {
                // show: true, //显示名称
              }
            },
            emphasis: {
              //选中的状态
              // 高亮状态下的多边形和标签样式
              shadowBlur: 20,
              shadowColor: 'rgba(0, 0, 0, 0.5)',
              borderColor: '#fff',
              areaColor: '#DA3A3A'
            }
          },
          emphasis: {
            show: true,
            itemStyle: {
              areaColor: '#2a333d'
            }
          }
        },
        series: seriesData
      })
    },
    /**
     * 基础数据看板
     */
    getDashboard() {
      dashboard.getDashboard(this.dateCount).then(data => {
        this.dashboardData = data.data
        setTimeout(() => {
          this.showOrderEcharts()
          this.showTruckEcharts()
          this.createLine(this.local())
        }, 500)
      }).catch(e => {

      })
    },
    /**
     * 显示订单树状图
     */
    showOrderEcharts() {
      var myChart = this.$echarts.init(document.getElementById('main'))
      //配置图表
      var option = {
        title: {
          text: '近7天每日订单数'
        },
        tooltip: {},
        legend: {
          data: ['订单数']
        },
        xAxis: {
          data: this.dashboardData.orderDashboardVO.dateTimes
        },
        yAxis: {
          type: 'value'
        },
        series: {
          name: '订单数',
          data: this.dashboardData.orderDashboardVO.dailyOrders,
          type: 'bar'
        }
      }
      myChart.setOption(option)
    },
    /**
     * 显示车载饼形图
     */
    showTruckEcharts() {
      let ruckStatusCount = this.dashboardData.truckStatusDashboardVO.truckStatusCount
      let truckStatusName = this.dashboardData.truckStatusDashboardVO.truckStatusName
      for (let i = 0; i < ruckStatusCount.length; i++) {
        this.truckStatusData.push({
          value: ruckStatusCount[i],
          name: truckStatusName[i]
        })
      }
      var myChart = this.$echarts.init(document.getElementById('truckMain'))
      var option = {
        title: {
          text: '车载状态',
          subtext: '品达物流',
          left: 'center'
        },
        tooltip: {
          trigger: 'item'
        },
        legend: {
          orient: 'vertical',
          left: 'left'
        },
        series: [
          {
            name: '品达物流',
            type: 'pie',
            radius: '50%',
            data: this.truckStatusData,
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }
        ]
      }
      myChart.setOption(option)
    }
  }
  ,
  mounted() {
    this.getDashboard()

  }
}
</script>

<style scoped>
.box-card {
  width: 400px;
}
</style>
